<template>
  <div class="ensureMoney">
    <!--  顶部导航  -->
    <HeaderSimple
      page="userInformation"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <!-- 内容 -->
    <div class="section">
      <div class="card">
        <h3 class="card_money">保证金</h3>
        <span class="card_price">100</span><span class="card_px">/元</span>
      </div>

      <div class="title aic flex">
        <h1>保证金协议</h1>
      </div>

      <div class="content">
        <div class="content_one">
          <van-image
            class="content_img"
            width="25"
            height="25"
            :src="require('../../assets/img/goodsDetail/ensureMoney.png')"
          >
          </van-image>
          <p class="content_info">
            如个人买家有两次拍中未付款的记录，则第三次参加 竞拍出价前需要缴付
            <span style="color: #FF3B3E;">100元</span> 保证金。
          </p>
        </div>
        <div class="content_one">
          <van-image
            class="content_img"
            width="25"
            height="25"
            :src="require('../../assets/img/goodsDetail/ensureMoney.png')"
          >
          </van-image>
          <p class="content_info">
            如个人买家有两次拍中未付款的记录，则第三次参加 竞拍出价前需要缴付
            <span style="color: #FF3B3E;">100元</span> 保证金。
          </p>
        </div>
      </div>

      <!--    协议单选 check_ok    -->
      <van-checkbox
        v-model="checked"
        class="check_ok"
        checked-color="#FF5050"
        icon-size="15"
        >我已同意淘亮机保证金协议</van-checkbox
      >
    </div>

    <!--  底部  -->
    <div class="footer">
      <van-button type="default" class="footer_btn"
        >确定支付100元保证金</van-button
      >
    </div>
  </div>
</template>

<script>
import { Image, Checkbox, CheckboxGroup, Button } from "Vant";
import HeaderSimple from "@/components/HeaderSimple";
export default {
  data() {
    return {
      checked: true
    };
  },
  components: {
    HeaderSimple
  },
  created() {
    this.title = this.$route.meta.title;
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.ensureMoney {
  width: 100%;
  background: rgba(255, 255, 255, 1);

  .section {
    width: 100%;
    min-height: 1234px;
    background: rgba(255, 255, 255, 1);
    padding: 38px 30px;

    .card {
      height: 198px;
      width: 100%;
      background: linear-gradient(
        128deg,
        rgba(252, 114, 51, 1),
        rgba(254, 48, 71, 1)
      );
      border-radius: 12px;
      padding: 34px 36px;

      .card_money {
        font-size: 34px;
        font-family: PingFang SC;
        font-weight: 500;
        margin-bottom: 30px;
        color: rgba(255, 255, 255, 1);
      }

      .card_price {
        font-size: 62px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }

      .card_px {
        font-size: 40px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
    }

    .title {
      width: 100%;
      height: 100px;
      padding: 24px 0;

      h1 {
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(50, 51, 51, 1);
      }
    }

    .content {
      width: 100%;

      .content_one {
        overflow: hidden;
        margin-bottom: 73px;

        .content_img {
          width: 50px;
          height: 50px;
          float: left;
        }

        .content_info {
          float: left;
          width: 595px;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 40px;
          margin-left: 25px;
        }
      }
    }

    .check_ok {
      position: absolute;
      bottom: 38px + 98px;
      height: 35px;
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 98px;
    .footer_btn {
      width: 100%;
      height: 98px;
      background-color: #ff3b3e;
      color: #ffffff;
      font-size: 28px;
      font-family: PingFang SC, sans-serif;
      font-weight: 500;
    }
  }
}
</style>
